{% extends "../layout/layout.tpl" %}

{% block content %}
  <div class="container">
    <nav class="breadcrumb" aria-label="breadcrumbs">
      <ul>
        <li><a href="/?location={{ location.id }}"><span class="icon is-small"><i class="fa fa-home"></i></span><span>主页</span></a></li>
        <li><a href="/movie/{{ ctx.params.movieId }}?location={{ location.id }}"><span class="icon is-small"><i class="fa fa-film"></i></span><span>{{ movieDetail.basic.name }}</span></a></li>
        <li><a href="#"><span class="icon is-small"><i class="fa fa-video-camera"></i></span><span>拍摄花絮</span></a></li>
      </ul>
    </nav>
    <div class="content">
      <article class="message is-dark">
        <div class="message-header">
          <p>提示</p>
        </div>
        <div class="message-body">
          由于三方的 api 不支持跨域视频访问，想观看视频请到 <a href="http://movie.mtime.com/{{ ctx.params.movieId }}/trailer.html" target="_blank">http://movie.mtime.com/{{ ctx.params.movieId }}/trailer.html</a>
        </div>
      </article>
      {% for item in videoData.videoList %}
        <div style="display:none;" id="video{{ item.id }}">
          <video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none">
            <source src="{{ item.url }}" type="video/mp4">
            Your browser does not support HTML5 video.
          </video>
        </div>
      {% endfor %}

      <div id="video-gallery" class="columns is-multiline is-mobile">
        {% for item in videoData.videoList %}
          <div class="column is-3 video-item" data-poster="{{ item.image }}" data-sub-html="{{ item.title }}" data-html="#video{{ item.id }}">
            <img class="cover" src="{{ item.image }}" />
            <img class="play-btn" src="">
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
{% endblock %}
